<template>
    <!-- <button @click="toggleOverlay">打开ActionSheet</button> -->
    <!-- <tm-Overlay v-model:visible="show" :z-index="122">
        <div style="height: 250px; background-color: white" @click.stop>这是一首简单的歌</div>
    </tm-Overlay> -->

    <!-- <tm-action-sheet
        v-model:visible="show"
        @choose="onActionHandle"
        @cancel="onCancel"
        :items="[
            { name: '选项一', value: 0 },
            { name: '选项二', value: ['2-0', '2-1'] },
            { name: '选项三', value: 2 },
        ]"
    />
    &#x3000; &#x3000; &#x3000;
    <button @click="drawerVisible = !drawerVisible">打开抽屉</button>
    &#x3000; &#x3000; &#x3000; -->
    <!-- <Switch v-model="switchModel" :actived-color="color" :size="show" /> -->
    <!-- <Drawer title="理想三旬" v-model:visible="drawerVisible">
        <div style="overflow-y: scroll; height: 100%">
            雨后有车驶来 <br /><br />
            驶过暮色苍白 <br /><br />
            旧铁皮往南开 <br /><br />
            恋人已不再<br /><br />
            ... <br /><br />
            就甜蜜的忍耐<br /><br />
            繁星润湿窗台<br /><br />
            而风声吹到这，已不需要释怀<br /><br />
            雨后有车驶来 <br /><br />
            驶过暮色苍白 <br /><br />
            旧铁皮往南开 <br /><br />
            恋人已不再<br /><br />
            ... <br /><br />
            就甜蜜的忍耐<br /><br />
            繁星润湿窗台<br /><br />
            而风声吹到这，已不需要释怀<br /><br />
            雨后有车驶来 <br /><br />
            驶过暮色苍白 <br /><br />
            旧铁皮往南开 <br /><br />
            恋人已不再<br /><br />
            ... <br /><br />
            就甜蜜的忍耐<br /><br />
            繁星润湿窗台<br /><br />
            而风声吹到这，已不需要释怀<br /><br />
            雨后有车驶来 <br /><br />
            驶过暮色苍白 <br /><br />
            旧铁皮往南开 <br /><br />
            恋人已不再<br /><br />
            ... <br /><br />
            就甜蜜的忍耐<br /><br />
            繁星润湿窗台<br /><br />
            而风声吹到这，已不需要释怀<br /><br />
        </div>
    </Drawer> -->

    <div class="flex-column flex-center-center">
        <img class="logo" src="http://www.tomatoui.cn/favicon.ico" alt="番茄组件库" />
        <h3 class="project-name">番茄组件库</h3>
    </div>
</template>

<script setup>
import TmOverlay from '@tomatoUi/components/Overlay'
import TmActionSheet from '@tomatoUi/components/action-sheet'
import Notify from '@tomatoUi/components/Notify'
import Drawer from '@tomatoUi/components/Drawer'
import Switch from '@tomatoUi/components/Switch'

import { ref, onMounted } from 'vue'
const show = ref(false)
const color = ref('#f13a3a')

const switchModel = ref(false)
const drawerVisible = ref(true)

onMounted(() => {
    // setTimeout(() => {
    //     Notify.success('成功的消息通知', 2000)
    // }, 1000)
    // setTimeout(() => {
    //     Notify.danger('危险的消息通知', 2000)
    // }, 2000)
    // setTimeout(() => {
    //     Notify.warn('警告的消息通知', 2000)
    // }, 3000)
    // setTimeout(() => {
    //     Notify.primary('默认的消息通知', 2000)
    // }, 4000)
    // setTimeout(() => {
    //     Notify.custom('自定义的消息通知', {
    //         color: '#fff',
    //         background: '#ff6374',
    //         duration: 2000,
    //     })
    // }, 5000)
})

const toggleOverlay = () => {
    show.value = true
}

const onActionHandle = values => {
    console.log('选中的值', values)
}

const onCancel = () => console.log('取消了选择ActionSheet')
</script>

<style lang="scss" scoped>
.logo {
    width: 64px;
    height: 64px;
}
</style>
